import React, { useEffect, useState } from 'react';
import {
  Descriptions,
  PageHeader,
  Divider,
  Button,
  Input,
  Form,
  Row,
  Col,
  Modal,
  Select
} from 'antd';
import { Redirect, connect } from 'umi';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import moment from 'moment';
import './index.less';
import { getAuthority } from '@/utils/authority';

const { confirm } = Modal;
const FormItem = Form.Item;

const EnterprisePage = props => {

  const {  dispatch,enterInfo,secretInfo } = props;
  const [visible, setVisible] = useState(false);
  const [refresh, setRefresh] = useState(new Date().valueOf());
  const [form] = Form.useForm();
  /*加载完页面后执行 */
  useEffect(() => {
    /*通过dispatch调用model.js中的方法返回结果在model的list方法中进行处理的，refresh是刷新界面 */
    const currentAuth = getAuthority();
    if(currentAuth){
      dispatch({
        type: 'enterpriseModel/get',
        id: '001',
      });
    }
  }, [refresh]);

  const handleChangeClick =(e)=>{
    setVisible(!visible);
    if(visible){
      e.target.innerText="企业联系人变更";
      form.submit();
    }else{
      e.target.innerText="保存";
      if(form && enterInfo){
        form.setFieldsValue(enterInfo);
      }
    }
    
  }

  const handleUpdateSecretOk =(id,field)=>{
      dispatch({
        type: 'enterpriseModel/refresh',
        eid:enterInfo.corporationid,
        id: id,
        field:field
      });
      setRefresh(new Date().valueOf())
  }
  const handleUpdateSecret=(id,field) => {
    confirm({
      title: '提示信息',
      icon: <ExclamationCircleOutlined />,
      content: '是否确认更新'+field+'?',
      okText: '确认',
      cancelText: '取消',
      onOk:()=>{handleUpdateSecretOk(id,field)}
    });
  }

  const handleSubmit = values => {
    dispatch({
      type: 'enterpriseModel/submit',
      payload: {
        id:enterInfo.corporationid,
        ...values,
      }
    });
  };


  return (
    <div className="page">
      <div style={{paddingTop:10,paddingLeft:10}}> 
      <PageHeader
        title="企业信息"
      />
      <Divider style={{margin:0}} />
       <Descriptions  column="3" title="企业基本信息">
        <Descriptions.Item label="企业名称">{enterInfo.corporationname}</Descriptions.Item>
        <Descriptions.Item label="企业简称">{enterInfo.corporationcode}</Descriptions.Item>
        <Descriptions.Item label="注册时间">{ moment( enterInfo.registertime).format('YYYY-MM-DD')}</Descriptions.Item>
        <Descriptions.Item label="到期时间">{moment(enterInfo.expiretime).format('YYYY-MM-DD')}</Descriptions.Item>
        <Descriptions.Item label="服务用户数">{enterInfo.custemercount}</Descriptions.Item>
        <Descriptions.Item label="状态">{enterInfo.isable==2?'停用':'正常'}</Descriptions.Item>
        <Descriptions.Item span={3} label="企业注册地址">{enterInfo.corporateaddress}</Descriptions.Item>
        <Descriptions.Item span={3} label="经营范围">{enterInfo.businessscope}</Descriptions.Item>
        
      </Descriptions>
      <Row >
        <Col span="16"><div className="customDescription">企业联系信息</div></Col>
        <Col span="8"><Button onClick={handleChangeClick}>企业联系人变更</Button> </Col>
      </Row>
      
      <Descriptions  column="3" style={ {display: visible?"none":""}} >
        <Descriptions.Item label="企业联系人1">{enterInfo.contacts1}</Descriptions.Item>
        <Descriptions.Item label="联系电话">{enterInfo.contacts1tel}</Descriptions.Item>
        <Descriptions.Item label="联系邮箱">{enterInfo.contacts1mail}</Descriptions.Item>
        <Descriptions.Item label="企业联系人2">{enterInfo.contacts2}</Descriptions.Item>
        <Descriptions.Item label="联系电话">{enterInfo.contacts2tel}</Descriptions.Item>
        <Descriptions.Item label="联系邮箱">{enterInfo.contacts2mail}</Descriptions.Item>
        <Descriptions.Item label="企业联系人3">{enterInfo.contacts3}</Descriptions.Item>
        <Descriptions.Item label="联系电话">{enterInfo.contacts3tel}</Descriptions.Item>
        <Descriptions.Item label="联系邮箱">{enterInfo.contacts3mail}</Descriptions.Item>
      </Descriptions>
      <div  style={{display: !visible?"none":""}}>
        <Form  name='contactsForm' form={form} onFinish={handleSubmit} >
          <Row>
            <Col> <FormItem label="企业联系人1"  name="contacts1" > 
                    <Input />  
                  </FormItem>  </Col>
            <Col> <FormItem label="联系电话" name="contacts1tel" > 
                    <Input />  
                  </FormItem>  </Col>
            <Col> <FormItem label="联系邮箱" name="contacts1mail" > 
                    <Input />  
                  </FormItem>  </Col>
          </Row>
          <Row>
            <Col> <FormItem label="企业联系人2" name="contacts2" > 
                    <Input />  
                  </FormItem>  </Col>
            <Col> <FormItem label="联系电话" name="contacts2tel" > 
                    <Input />  
                  </FormItem>  </Col>
            <Col> <FormItem label="联系邮箱" name="contacts2mail" > 
                    <Input />  
                  </FormItem>  </Col>
          </Row>
          <Row>
            <Col> <FormItem label="企业联系人3" name="contacts3" > 
                    <Input />  
                  </FormItem>  </Col>
            <Col> <FormItem label="联系电话" name="contacts3tel" > 
                    <Input />  
                  </FormItem>  </Col>
            <Col> <FormItem label="联系邮箱" name="contacts3mail" > 
                    <Input />  
                  </FormItem>  </Col>
          </Row>
        </Form>
      </div>
      <Descriptions column="3" title="客户代表">
        <Descriptions.Item label="客户代表">{enterInfo.representative}</Descriptions.Item>
        <Descriptions.Item label="联系方式">{enterInfo.representativecontact}</Descriptions.Item>
      </Descriptions>
      <Descriptions  column="3" title="存储量">
        <Descriptions.Item label="存储总量"></Descriptions.Item>
        <Descriptions.Item label="剩余存储量"></Descriptions.Item>
      </Descriptions>
      <Descriptions column="3" title="OPEN API 密钥">
        <Descriptions.Item span="3" label="APPID">{secretInfo.appid}</Descriptions.Item>
        <Descriptions.Item label="Secret1">{secretInfo.secret1}</Descriptions.Item>
        <Descriptions.Item label="更新时间">{moment(secretInfo.secret1updatetime).format('YYYY-MM-DD')}</Descriptions.Item>
        <Descriptions.Item > <Button type="link" onClick={()=>{handleUpdateSecret(secretInfo.openapiauthid,"secret1")}} >更新</Button> </Descriptions.Item>
        <Descriptions.Item label="Secret2">{secretInfo.secret2}</Descriptions.Item>
        <Descriptions.Item label="更新时间">{moment(secretInfo.secret2updatetime).format('YYYY-MM-DD')}</Descriptions.Item>
        <Descriptions.Item > <Button type="link" onClick={()=>{handleUpdateSecret(secretInfo.openapiauthid,"secret2")}} >更新</Button> </Descriptions.Item>
      </Descriptions>
      </div>
    </div>
  );
};
 
/*这里将model和界面属性绑定并赋值注意model的名字要跟model.js文件中定义的namespace相同 */
export default connect(({ enterpriseModel, loading }) => ({
  enterpriseModel,
  enterInfo: enterpriseModel.enterInfo,
  secretInfo: enterpriseModel.secretInfo
}))(EnterprisePage);